import React, {PureComponent} from 'react';
import {Button, Card, Col, Form, Input, Row, Select, Steps, Tree,} from 'antd';
import DescriptionList from '@/components/DescriptionList';
import {connect} from 'dva';
import TableList from '@/components/TableList';
import styles from './index.less';

const {TreeNode} = Tree;
const DirectoryTree = Tree.DirectoryTree;
const {Description} = DescriptionList;
const FormItem = Form.Item;
const {Step} = Steps;
const {TextArea} = Input;
const {Option} = Select;
const formLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18},
};
@connect(({privateFileModel}) => ({
  privateFileModel,
}))
@Form.create()
class UserSelect extends PureComponent {
  state = {
    orgId: "",
    orgTree: [],
    usersData: {},
    selectedRows: [],

  };

  columns = [
    {
      title: '姓名',
      dataIndex: 'userName',

    },
    {
      title: '登录名',
      dataIndex: 'userCode',
    }
  ];

  renderForm() {
    const {
      form: {getFieldDecorator},
    } = this.props;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{md: 8, lg: 24, xl: 48}}>
        <Col md={10} sm={24}>
          <FormItem label="姓名" {...formLayout}>
            {getFieldDecorator('userName')(<Input placeholder="请输入"/>)}
          </FormItem>
        </Col>
        <Col md={10} sm={24}>
          <FormItem label="登录名" {...formLayout}>
            {getFieldDecorator('userCode')(<Input placeholder="请输入"/>)}
          </FormItem>
        </Col>        
        <Col md={4} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </span>
        </Col>
        </Row>
      </Form>
    );
  }

  /***
   * when org was selected or not selected
   * @param v
   */
  onOrgSelect = v => {
    const orgId = v[0];
    if (orgId) {
      const {queryUserList} = this.props;
      this.setState({orgId: orgId});
      queryUserList({orgId: orgId});
      this.resetSelectedRows();
    }
  };

  /**
   * when orgId or UserList changed,reset the selected rows
   */
  resetSelectedRows=()=>{
    this.handleSelectRows([]);
  }

  handleSelectRows = rows => {
    const {handleSelectUserRows} = this.props;
    this.setState({
      selectedRows: rows,
    });
    //transfer to the outside <FlowCreateForm />
    handleSelectUserRows(rows);

  };

  handleSearch = e => {
    e.preventDefault();
    const {queryUserList, form} = this.props;
    const {orgId} = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.setState({
        formValues: fieldsValue,
      })
      fieldsValue.orgId = orgId;
      //点击查询
      queryUserList(fieldsValue);
      this.resetSelectedRows();
    });
  };

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const {queryUserList} = this.props;
    const {formValues} = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = {...obj};
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      pageNum: pagination.current - 1,
      pageSize: pagination.pageSize,
      ...formValues,
      ...filters,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }
    queryUserList(params);
    this.resetSelectedRows();
  };

  componentDidMount() {
    // 组织树请求
    const {queryOrgTree} = this.props;
    queryOrgTree();
  }


  render() {
    const {handleModalVisible, modalVisible, loading, orgTree, usersData} = this.props;
    const {selectedRows,} = this.state;

    const loopOrgTree = data => data.map((item) => {
      if (item.children) {
        return (
          <TreeNode key={item.id} title={item.orgName} {...item}>
            {loopOrgTree(item.children || [])}
          </TreeNode>
        );
      }
      return <TreeNode key={item.id} title={item.orgName} {...item}/>;
    });
    const columns = [
      {
        title: '姓名',
        dataIndex: 'userName',

      },
      {
        title: '登录名',
        dataIndex: 'userCode',
      }
    ];
    return <Row gutter={8} style={{width: '100%'}}>
          <Col md={7}>
            <Card bordered={false} bodyStyle={{padding: 0, height: '520px', overflow: 'auto'}}>
              {orgTree && orgTree.length ? <Tree
                showLine={true}
                defaultExpandedKeys={['1']}
                onSelect={this.onOrgSelect}
              >
                {loopOrgTree(orgTree || [])}
              </Tree> : null}
            </Card>
          </Col>
          <Col md={17} >
            <Card bordered={false} bodyStyle={{padding: 0,height: '520px', overflow: 'auto'}}>
              {this.renderForm()}
              <TableList
                selectedRows={selectedRows}
                loading={loading}
                data={usersData}
                columns={this.columns}
                onSelectRow={this.handleSelectRows}
                onChange={this.handleStandardTableChange}
                className={styles.tdPadding}
              />
            </Card>
          </Col>
        </Row>
  }


}

export default UserSelect;
